<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本使用</title>
</head>
<body>
    <button id="btn">点击抽奖</button>
    <script>
        function rand(m,n){
            return Math.ceil(Math.random() * (n-m+1)) + m-1;
        }
        // 点击按钮, 2s 后显示是否中奖.  30% 概率中奖  1-100
        // 中奖弹出   恭喜恭喜   显示中奖号码
        // 未中奖弹出  再接再厉   显示数字
        
        //绑定事件
        let btn = document.querySelector('#btn');

        btn.onclick = function(){
            // setTimeout(() => {
            //     //获取一个从 1-100 的随机数
            //     let n = rand(1, 100);
            //     //判断
            //     if(n <= 30){
            //         alert('恭喜恭喜, 您的中奖号码为 '+n +'奖品为 100w 劳斯莱斯优惠券');
            //     }else{
            //         alert('再接再厉, 您的抽奖号码为 '+ n);
            //     }
            // }, 2000)

            //Promise 的实现方式
            let p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    //获取一个从 1-100 的随机数
                    let n = rand(1, 100);
                    //判断
                    if(n <= 30){
                        //成功的情况
                        resolve(n);
                    }else{
                        //失败的情况
                        reject(n);
                    }
                }, 2000);
            });

            //调用 promise 对象的 then 方法来完成对结果的处理
            // then 然后
            p.then(function(value){
                alert('恭喜恭喜 您的中奖号码为 '+ value);
            }, function(reason){
                alert('再接再厉  您的抽奖号码为' + reason);
            });

            //打印 promise 对象
            console.log(p);
        }

        
        
    </script>
</body>

</html>